<template>
  <div class="mapPanel">
    <div class="panel-header">
      <div class="panel-title">模式选择</div>
    </div>
    <div class="choose-box">
      <div class="choose-btn">GRAPES</div>
      <div class="choose-btn">GRAPES</div>
      <div class="choose-btn">GRAPES</div>
      <div class="choose-btn">GRAPES</div>
    </div>
    <div class="panel-header">
      <div class="panel-title">起报</div>
    </div>
    <div class="radio-box">
      <template>
        <el-radio
          v-model="radio"
          label="02"
        >02</el-radio>
        <el-radio
          v-model="radio"
          label="08"
        >08</el-radio>
        <el-radio
          v-model="radio"
          label="14"
        >14</el-radio>
        <el-radio
          v-model="radio"
          label="20"
        >20</el-radio>
      </template>
    </div>
    <div class="panel-header">
      <div class="panel-title">时效选择</div>
    </div>
    <div class="choose-box">
      <div class="choose-btn">GRAPES</div>
      <div class="choose-btn">GRAPES</div>
      <div class="choose-btn">GRAPES</div>
      <div class="choose-btn">GRAPES</div>
      <div class="choose-btn">GRAPES</div>
      <div class="choose-btn">GRAPES</div>
      <div class="choose-btn">GRAPES</div>
    </div>
    <div class="panel-header">
      <div class="panel-title">产品选择</div>
    </div>
    <div class="check-box">
      <template>
        <el-checkbox v-model="checked">备选项</el-checkbox>
      </template>
    </div>
    <div class="panel-header">
      <div class="panel-title">站点搜索</div>
    </div>
    <div class="search-box">
      <template>
        <el-input
          v-model="keyword"
          placeholder="请输入内容"
          class="input-with-select"
        />
        <el-button slot="append">搜索</el-button>
      </template>
    </div>
    <div class="submit-box">
      <div class="submit-btn">产品制作</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MapPanel',
  props: {},
  data() {
    return {
      pattern: [
        { label: 'GPAPES', value: '' },
        { label: 'EC模式', value: '' },
        { label: '华南模式', value: '' },
        { label: '订正模式', value: '' }
      ],
      monment: [
        { label: '02', value: '' },
        { label: '08', value: '' },
        { label: '14', value: '' },
        { label: '20', value: '' }
      ],
      hours: [
        { label: '0小时', value: '' },
        { label: '12小时', value: '' },
        { label: '24小时', value: '' },
        { label: '36小时', value: '' },
        { label: '48小时', value: '' },
        { label: '60小时', value: '' },
        { label: '72小时', value: '' }
      ],
      product: [{ label: '暴雨规划', value: '' }],
      radio: '02',
      checked: true,
      keyword: ''
    }
  },
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style scoped>
.mapPanel {
  width: 240px;
  position: absolute;
  top: 4.5rem;
  border: 1px solid #dedede;
  background-color: #ffffff;
  z-index: 1;
  right: 20px;
  -webkit-box-shadow: 0 0 10px hsl(0deg 0% 40% / 25%);
  box-shadow: 0 0 10px hsl(0deg 0% 40% / 25%);
  border-radius: 4px;
}

.panel-header {
  height: 36px;
  line-height: 36px;
  color: #3285ff;
  font-size: 12px;
  border-bottom: 2px solid #cac6c7;
}
.panel-title {
  height: 35px;
  width: 72px;
  border-bottom: 2px solid #3285ff;
  padding-left: 12px;
}
.choose-box {
  margin: 15px 25px;
}
.choose-btn {
  width: 72px;
  height: 26px;
  line-height: 26px;
  border: 1px solid #cac6c7;
  border-radius: 6px;
  text-align: center;
  display: inline-table;
  margin: 4px 9px;
  font-size: 12px;
}
.radio-box,
.check-box,
.search-box {
  margin: 15px 15px;
}
.el-radio {
  margin: 0 4px !important;
}
.submit-box {
  margin: 25px 45px;
}
.submit-btn {
  height: 32px;
  line-height: 32px;
  background-color: #f69141;
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
  color: #ffffff;
}

.search-box {
  display: inline-flex;
}
.search-box .el-input__inner {
  height: 28px !important;
  border-radius: 0 !important;
  width: 112px !important;
}
.search-box button {
  height: 28px;
  border-radius: 0;
  text-align: center;
  line-height: 28px;
  padding: 0 12px;
  background: #3590f9;
  color: #fff;
  border: 1px solid #3590f9;
}
</style>
